<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        收集表单数据:
          1.若收集表单text类型 则v-model收集的就是value值
          2.若收集表单radio类型 则v-model收集的也是value值 且要给标签配置value值
          (就是用户输入的什么就配置什么值让v-model可以监测到就行)

          3.若收集表单的checkbox复选框类型
              3.1没有配置input的value属性:name收集的就是checked(勾选状态 布尔值)
              3.2配置input的value值:
                 (1)v-model的初始值是非数组 name收集的就是checked (勾选状态 布尔值)
                 (2)v-model的初始值是数组 name收集的就是value组成的数组
                 
        备注:v-model的三个修饰符:
                  lazy:失去焦点在收集表单数据
                  number:输入字符串转为有效数字
                  trim:去除首尾空格
                      
     -->
    <div id="root">

        <form @submit.prevent="demo">
            账号: <input type="text" v-model.trim="userinfo.account"><br><br>
            密码: <input type="password" v-model="userinfo.password"><br><br>
            性别:
            男<input type="radio" v-model="userinfo.sex" name="sex" value="nan"> 女 <input type="radio" name="sex"
                value="nv" v-model="userinfo.sex"><br><br>
            年龄:  <input type="number" v-model.number="userinfo.age"> <br><br>
            爱好: 电影<input type="checkbox" v-model="userinfo.hobby" value="movie"> 健身<input type="checkbox" value="fitness"
                v-model="userinfo.hobby"> 干饭<input type="checkbox" value="eat"
                v-model="userinfo.hobby"><br><br>
            所属校区: <select v-model="userinfo.campus"><br><br>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzheng">深圳</option>
            </select><br><br>
            其他信息: <textarea v-model.lazy="userinfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userinfo.agree" value="checked">阅读并接受<a
                href="www.meinv.com">《用户协议》</a><br><br>
            <button>提交表单</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                userinfo: {
                    account: '',
                    password: '',
                    sex: 'nv',
                    age:'',
                    hobby: [],
                    campus: 'beijing',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                demo() {
                    console.log(JSON.stringify(this.userinfo));
                }
            }
        })
    </script>
</body>

</html>